<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
</head>
<body>
<div style="width: 350px; margin: 100px auto 0 auto; height: 400px; border: 1px solid #ccc;
        border-radius: 5px; box-shadow:#ccc 0 0 10px; ">
    <div style="margin-top: 30px; text-align: center; ">
        <div style="text-align: center; margin-top: 80px; font-size: 30px; color: dodgerblue">欢迎登录</div>
        <div style="margin-top: 30px">
            <input type="text" id="username" style="width: 60%; border: 1px solid #ccc; padding: 10px"
                   placeholder="请输入账号">
        </div>
        <div style="margin-top:10px">
            <input type="password" id="password" style="width: 60%; border: 1px solid #ccc; padding: 10px"
                   placeholder="请输入密码">
        </div>
        <div style="margin-top: 30px">
            <button style="width: 60%; border: none; background-color: dodgerblue; color: white; font-size: 16px;
                 box-sizing: content-box; padding: 10px; cursor: pointer" onclick="login()">登录
            </button>
        </div>
    </div>
</div>

<script src="jquery.min.js"></script>

<script>
    function login() {
        let username = $("#username").val();
        let password = $("#password").val();
        if (!username) {
            alert("请输入账号")
            return;
        }
        let data = {username: username, password: password}
        $.ajax({
            type: "POST",
            url: "/user/login",
            data: JSON.stringify(data),
            contentType: "application/json",
            success: (res) => {
                if (res.code === '0') {
                    location.href = "/";
                } else {
                    alert("账号或密码错误")
                }
            }
        })
    }
</script>

</body>
</html>
